<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram - Rolling Cylinder</title>
</head>
<body>
<canvas id="physics-canvas" width="500" height="500"></canvas>

<script>
    const canvas = document.getElementById('physics-canvas');
    const ctx = canvas.getContext('2d');

    // Helper function to draw an arrow
    function drawArrow(ctx, fromX, fromY, toX, toY, headLength = 10) {
        const dx = toX - fromX;
        const dy = toY - fromY;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // --- Main Drawing ---

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = 'italic 20px Times New Roman';

    // Parameters
    const cornerA = { x: 180, y: 280 };
    const radius = 90;
    const theta = Math.PI / 4.5; // Angle in radians (40 degrees)

    // 1. Draw the corner (table edge)
    ctx.beginPath();
    ctx.moveTo(50, cornerA.y);
    ctx.lineTo(cornerA.x, cornerA.y);
    ctx.lineTo(cornerA.x, cornerA.y + 120);
    ctx.stroke();

    // Draw hatching for the corner
    ctx.lineWidth = 1;
    for (let i = 0; i < 10; i++) {
        // Horizontal surface
        ctx.beginPath();
        ctx.moveTo(60 + i * 12, cornerA.y + 5);
        ctx.lineTo(50 + i * 12, cornerA.y + 15);
        ctx.stroke();
        // Vertical surface
        ctx.beginPath();
        ctx.moveTo(cornerA.x - 5, cornerA.y + 10 + i * 12);
        ctx.lineTo(cornerA.x - 15, cornerA.y + i * 12);
        ctx.stroke();
    }
    ctx.lineWidth = 2;

    // Label point A
    ctx.font = '20px Times New Roman';
    ctx.fillText('A', cornerA.x - 25, cornerA.y + 5);


    // 2. Draw the cylinders representing motion
    // Calculate center of the main cylinder
    const centerX = cornerA.x + radius * Math.sin(theta);
    const centerY = cornerA.y - radius * Math.cos(theta);

    // Draw the "previous position" circle
    ctx.beginPath();
    ctx.arc(centerX - 65, centerY + 15, radius, 0, 2 * Math.PI);
    ctx.stroke();

    // Draw the main cylinder
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
    ctx.stroke();

    // 3. Draw the forces
    // a) Gravity (mg)
    const mg_len = 110;
    drawArrow(ctx, centerX, centerY, centerX, centerY + mg_len);
    ctx.font = 'italic 20px Times New Roman';
    ctx.fillText('mg', centerX + 10, centerY + mg_len + 15);

    // b) Normal Force (N)
    const N_len = 80;
    const N_endX = cornerA.x + N_len * Math.sin(theta);
    const N_endY = cornerA.y - N_len * Math.cos(theta);
    drawArrow(ctx, cornerA.x, cornerA.y, N_endX, N_endY);
    ctx.fillText('N', N_endX + 5, N_endY);

    // c) Friction Force (f)
    const f_len = 70;
    const f_endX = cornerA.x - f_len * Math.cos(theta);
    const f_endY = cornerA.y - f_len * Math.sin(theta);
    drawArrow(ctx, cornerA.x, cornerA.y, f_endX, f_endY);
    ctx.fillText('f', f_endX - 20, f_endY);


    // 4. Draw the angle theta
    // Dashed lines
    ctx.save();
    ctx.setLineDash([5, 5]);
    ctx.lineWidth = 1.5;
    // Vertical line
    ctx.beginPath();
    ctx.moveTo(cornerA.x, cornerA.y);
    ctx.lineTo(cornerA.x, cornerA.y - 60);
    ctx.stroke();
    // Radial line (to center)
    ctx.beginPath();
    ctx.moveTo(cornerA.x, cornerA.y);
    ctx.lineTo(centerX, centerY);
    ctx.stroke();
    // Angle arc
    ctx.beginPath();
    ctx.arc(cornerA.x, cornerA.y, 40, -Math.PI / 2, -Math.PI / 2 + theta);
    ctx.stroke();
    ctx.restore();

    // Label theta
    ctx.fillText('θ', cornerA.x + 20, cornerA.y - 25);


    // 5. Draw the rotation arrow
    ctx.beginPath();
    ctx.arc(centerX + 30, centerY - radius - 5, 50, -0.2 * Math.PI, 0.2 * Math.PI);
    ctx.stroke();
    // Arrow head for rotation
    const arrowAngle = 0.2 * Math.PI;
    const arrowX = centerX + 30 + 50 * Math.cos(arrowAngle);
    const arrowY = centerY - radius - 5 + 50 * Math.sin(arrowAngle);
    drawArrow(ctx, arrowX -1, arrowY -1, arrowX, arrowY, 10);


    // 6. Draw the caption
    ctx.font = '22px "SimSun", "Songti SC"'; // Common Chinese fonts
    ctx.fillText('力图 6.4.1', 190, 450);

</script>
</body>
</html>